<template>
  <div class="payInfo">
    <div class="left">
      <el-form ref="form" label-position="top" :model="form" label-width="80px">
        <div
          class="box"
          :style="{ height: active_h + 'px', overflow: 'hidden' }"
        >
          <el-form-item label="缴费人员">
            <el-input
              v-model="form.username"
              placeholder="输入缴费人员"
            ></el-input>
          </el-form-item>
          <el-form-item label="缴费名称">
            <el-input
              v-model="form.payname"
              placeholder="输入缴费项目/名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="支付类型">
            <el-select v-model="form.costtype" placeholder="输入支付类型">
              <el-option label="支付宝" :value="1"></el-option>
              <el-option label="微信" :value="2"></el-option>
              <el-option label="银联" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支付状态">
            <el-select v-model="form.coststatus" placeholder="选择支付状态">
              <el-option label="已支付" :value="1"></el-option>
              <el-option label="未支付" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支付时间">
            <el-date-picker
              v-model="form.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="缴费金额">
            <el-input
              v-model="form.paymoney"
              placeholder="输入缴费金额"
            ></el-input>
          </el-form-item>
          <el-form-item label="缴费优先级">
            <el-input
              v-model="form.paylevel"
              placeholder="输入缴费优先级"
            ></el-input>
          </el-form-item>
        </div>
        <div class="more" style="text-align: center">
          <span @click="moreLittle" v-if="active_h == 350">更多</span>
          <span @click="moreLittle" v-if="active_h == 540">收起</span>
        </div>
        <div class="btns">
          <el-form-item
            ><el-button @click="leftClear">重置</el-button>
            <el-button type="primary" @click="onSubmit">立即查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="right">
      <div class="title">
        <h1>缴费列表</h1>
        <div>
          <el-button icon="el-icon-bottom" @click="exportAll" type="primary"
            >导出</el-button
          >
        </div>
      </div>
      <div class="table">
        <el-table :data="tableData" border stripe style="width: 100%">
          <el-table-column
            align="center"
            prop="payname"
            label="缴费产品"
            width="180"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="username"
            label="缴费人员"
            width="180"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.username == null">暂无</span>
              <span v-if="scope.row.username != null">{{
                scope.row.username
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="costtype" label="支付类型">
            <template slot-scope="scope">
              <span v-if="scope.row.costtype == null">暂无</span>
              <span v-if="scope.row.costtype != null">{{
                scope.row.costtype
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="paymoney" label="缴费金额">
          </el-table-column>
          <el-table-column
            align="center"
            width="100px"
            prop="paylevel"
            label="缴费优先级"
          >
          </el-table-column>
          <el-table-column align="center" prop="costtime" label="支付时间">
            <template slot-scope="scope">
              <span v-if="scope.row.costtime == null">暂无</span
              ><span v-if="scope.row.costtime != null">{{
                scope.row.costtime
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="coststatus" label="支付状态">
            <template slot-scope="scope">
              <span v-if="scope.row.coststatus == 1"> 已支付</span>
              <span v-if="scope.row.coststatus != 1">未支付</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="" width="210px" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="toPayDetail(scope.row, scope.$index)"
                plain
                >查看</el-button
              >
              <el-button size="mini" @click="rowExport(scope.row, scope.$index)"
                >导出</el-button
              >
              <el-button
                size="mini"
                type="warning"
                @click="deleteRow(scope.row, scope.$index)"
                plain
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page" style="text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNumber"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { downloadXlsx } from "../../../../utils/xlsx";
export default {
  data() {
    return {
      active_h: 350,
      //表格
      tableData: null,
      //分页
      pageNumber: 1,
      pageSize: 10,
      total: 0,
      //初始化表格
      getTableData() {
        this.$axios
          .get("cost/getPayMessage", {
            params: {
              currPage: this.pageNumber - 1,
              pageNum: this.pageSize,
            },
          })
          .then((res) => {
            console.log(res, "res");
            this.tableData = res.data.data;
            this.total = res.data.total;
          });
      },
      //左侧表单
      form: {
        username: "",
        payname: "",
        costtype: "",
        coststatus: "",
        time: "",
        paymoney: "",
        paylevel: "",
      },
    };
  },
  methods: {
    //表单显示多少
    moreLittle() {
      if (this.active_h == 350) {
        this.active_h = 540;
      } else if (this.active_h == 540) {
        this.active_h = 350;
      }
    },
    //导出整表
    exportAll() {
      // 1. 定义表头和数据对应关系
      const headers = [
        { title: "缴费产品", key: "payname" },
        { title: "缴费人员", key: "username" },
        { title: "支付类型", key: "costtype" },
        { title: "支付金额", key: "paymoney" },
        { title: "缴费优先级", key: "paylevel" },
        { title: "支付时间", key: "costtime" },
        { title: "支付状态", key: "coststatus" },
      ];

      // 2. 初始化数据列表（首行为表头）
      const list = [
        headers.map((item) => item.title), // 生成表头行 ["缴费产品", "缴费人员"...]
      ];

      // 3. 遍历数据源
      this.tableData.forEach((item) => {
        const row = headers.map((header) => {
          // 4. 按表头顺序获取对应字段值
          const value = item[header.key];

          // 5. 可选：处理特殊数据格式
          // 例如时间戳转日期格式
          // if (header.key === 'costtime') return formatDate(value)

          return value ?? ""; // 处理undefined/null
        });

        list.push(row);
      });

      // 6. 调用导出方法
      downloadXlsx(list, "整表数据.xlsx");
    },
    //导出单行
    rowExport(row, index) {
      let list = [
        [
          "缴费产品",
          "缴费人员",
          "支付类型",
          "支付金额",
          "缴费优先级",
          "支付时间",
          "支付状态",
        ],
      ];
      let rowData = [];
      rowData.push(row.payname);
      rowData.push(row.username);
      rowData.push(row.costtype);
      rowData.push(row.paymoney);
      rowData.push(row.paylevel);
      rowData.push(row.costtime);
      rowData.push(row.coststatus);
      list.push(rowData);
      downloadXlsx(list, "单行数据.xlsx");
    },
    //删除
    deleteRow(row, index) {
      this.$confirm("确认删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("cost/delCostData", {
              params: {
                id: row.id,
                token: sessionStorage.getItem("token"),
              },
            })
            .then(() => {
              // console.log(res)
              this.getTableData();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //跳转详情
    toPayDetail(row, index) {
      this.$router.push({
        path: "/pay/payDetail",
        query: {
          detailId: row.id,
        },
      });
    },
    //左侧表单重置
    leftClear() {
      this.form = {
        username: "",
        payname: "",
        costtype: "",
        coststatus: "",
        time: "",
        paymoney: "",
        paylevel: "",
      };
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNumber = val;
      this.getTableData();
    },
    //左侧查询
    onSubmit() {
      this.$axios
        .get("cost/getPayMessage", {
          params: {
            username: this.form.username,
            payname: this.form.payname,
            costtype: this.form.costtype,
            coststatus: this.form.coststatus,
            startDate: this.form.time[0],
            endDate: this.form.time[1],
            paymoney: this.form.paymoney,
            paylevel: this.form.paylevel,
            currPage: this.pageNumber - 1,
            pageNum: this.pageSize,
          },
        })
        .then((res) => {
          // console.log(res)
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
  },
  created() {
    this.getTableData();
  },
};
</script>

<style lang="scss" scoped>
.payInfo::v-deep {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .left {
    padding: 10px;
    width: 26%;
    border: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 5px;
    .el-form-item {
      margin-bottom: 0px !important;
      .el-select {
        width: 100%;
      }
    }
    .btns {
      text-align: center;
    }
  }
  .right {
    padding: 10px;
    width: 70%;
    border: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 5px;
    .title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .table {
      thead {
        tr {
          th {
            font-size: 14px;
            color: black;
            background-color: #ebebeb;
          }
        }
      }
    }
  }
}
</style>